<template>
  <div>
    <div style="display: inline-block;" class="clearfix">
      <span class="demonstration filter-item">开始日期</span>
      <el-date-picker
        v-model="beginDate"
        :picker-options="pickerOptions0"
        class="filter-item"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期"/>
      <span class="demonstration filter-item">结束日期</span>
      <el-date-picker
        v-model="endDate"
        :picker-options="pickerOptions1"
        class="filter-item"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期"/>
    </div>
    <slot name="one"/>
    <div style="display: inline-block; float: right;">
      <el-button v-waves class="filter-item" type="primary" @click="today">今日</el-button>
      <el-button v-waves class="filter-item" type="primary" @click="yesterDay">昨天</el-button>
      <el-button v-waves class="filter-item" type="primary" @click="week">本周</el-button>
      <el-button v-waves class="filter-item" type="primary" @click="month">本月</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import waves from '@/directive/waves' // Waves directive
export default {
  name: 'SearchBar',
  directives: { waves },
  data() {
    return {
      beginDate: parseTime(new Date().getTime(), '{y}-{m}-{d} 00:00:00'),
      endDate: parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}:{s}'),
      pickerOptions0: {
        disabledDate(time) {
          return Date.now() < time.getTime()
        }
      },
      pickerOptions1: {
        disabledDate(time) {
          return Date.now() < time.getTime()
        }
      }
    }
  },
  created() {
  },
  methods: {
    GetDateStr(AddDayCount) {
      var dd = new Date()
      dd.setDate(dd.getDate() + AddDayCount)// 获取AddDayCount天后的日期
      var y = dd.getFullYear()
      var m = dd.getMonth() + 1// 获取当前月份的日期
      var d = dd.getDate()
      var h = dd.getHours()
      var i = dd.getMinutes()
      var s = dd.getSeconds()
      return `${y}-${m}-${d} ${h}:${i}:${s}`
    },
    getWeekStartDate() {
      var now = new Date() // 当前日期
      var nowYear = now.getFullYear() // 当前年
      var nowMonth = now.getMonth() // 当前月
      var nowDay = now.getDate() // 当前日
      var nowDayOfWeek = now.getDay() // 今天本周的第几天
      // var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
      var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1)
      return this.formatDate(weekStartDate)
    },
    getMonthStartDate() {
      var now = new Date()// 当前日期
      var nowYear = now.getFullYear() // 当前年
      var nowMonth = now.getMonth() // 当前月
      var monthStartDate = new Date(nowYear, nowMonth, 1)
      return this.formatDate(monthStartDate)
    },
    formatDate(date) {
      var myyear = date.getFullYear()
      var mymonth = date.getMonth() + 1
      var myweekday = date.getDate()
      var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var i = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      if (mymonth < 10) {
        mymonth = '0' + mymonth
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday
      }
      return myyear + '-' + mymonth + '-' + myweekday + ' ' + h + ':' + i + ':' + s
    },
    // 今日
    today() {
      this.beginDate = parseTime(new Date().getTime(), '{y}-{m}-{d} 00:00:00')
      this.endDate = parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}:{s}')
      this.handleFilter()
    },
    yesterDay() {
      this.beginDate = parseTime(new Date().getTime() - 24 * 3600 * 1000, '{y}-{m}-{d} 00:00:00')
      this.endDate = parseTime(new Date().getTime() - 24 * 3600 * 1000, '{y}-{m}-{d} 23:59:59')
      this.handleFilter()
    },
    week() {
      const date = parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}:{s}')
      this.beginDate = this.getWeekStartDate()
      this.endDate = date
      this.handleFilter()
    },
    month() {
      const date = parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}:{s}')
      this.beginDate = this.getMonthStartDate()
      this.endDate = date
      this.handleFilter()
    },
    handleFilter() {
      const date = {
        beginDate: this.beginDate,
        endDate: this.endDate
      }
      this.$emit('searchEvent', date)
    }
  }
}
</script>
